<template>
	<view class="phoneNumber">
		<div class="top">
			<span class="iconfont icon-zuojiantou" @click="go"></span>
		</div>
		<div class="content">
			<div class="title">绑定手机号</div>
			<u--form  :model="formDate" :rules="rules" ref="form1" >
						<u-form-item  prop="phone" ref="item">
							<u--input v-model="formDate.phone" placeholder="请输入手机号" prefixIcon="account"></u--input>
						</u-form-item>
						<u-form-item  prop="code" ref="item">
							<u--input v-model="formDate.code" placeholder="请输入验证码" type="password" prefixIcon="lock-open"></u--input>
						</u-form-item>
						<u-form-item  ref="item">
							<!-- <u-button type="primary" text="获取验证码" ></u-button> -->
							<wyb-button class="btn" width="190px" type="filled" @click="code" count-down="true" count-down-num="60">获取验证码</wyb-button>
						</u-form-item>
			</u--form>
			<u-button type="success" text="绑定" @click="bangding"></u-button>
		</div>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {get_captcha,bind_mobile} from '../request/index.js'
	export default {
		data() {
			return {
				formDate:{},
				rules: {
					'phone': {
					  type: String,
				      required: true,
					},
					 'code': {
					  type: Number,
					  max: 10,
				      required: true,
					}
				},
			};
		},
		methods:{
			go(){
				uni.navigateBack(1)
			},
			code(){
				console.log(this.formDate);
				get_captcha({phone:this.formDate.phone}).then(res=>{
					if(res.statusCode==200){
						this.$refs.uToast.show({
							message: "验证码是"+res.data.data,
						})
					}else if(res.statusCode==400){
						this.$refs.uToast.show({
							message: res.data.data,
						})
					}else if(res.statusCode==422){
						this.$refs.uToast.show({
							message: res.data.data,
						})
					}
					
					console.log(res);
				})
			},
			bangding(){
				console.log(this.formDate);
				bind_mobile(this.formDate).then(res=>{
					if(res.statusCode==200){
						uni.showToast({
							title:'绑定成功'
						})
					}else if(res.statusCode==400){
						this.$refs.uToast.show({
							message: res.data.data,
						})
					}else if(res.statusCode==422){
						this.$refs.uToast.show({
							message: "请输入正确的手机号",
						})
					}
					console.log(res);
				})
			}
		}
	}
</script>

<style lang="scss">
.phoneNumber{
	width: 100%;
	height: 100%;
	position: relative;
	.top{
		width: 100%;
		height: 200px;
		background-image: linear-gradient(to right bottom ,#3cfcb0,#54ebce, #6fd8f0);
		padding: 20px;
		box-sizing: border-box;	
		span{
			font-size: 25px;
			color: #fff;
		}
	}
	.content{
		position: absolute;
		top: 100px;
		left: 0;
		width: 100%;
		height: 300px;
		box-sizing: border-box;
		padding: 20px 40px;
		border-radius: 20px 20px 0 0;
		background-color: #fff;
	}
}
</style>
